<template>
  <div class="contractDetails">
    <el-card>
      <el-dropdown
        class="dropdown"
        @command="changeReason"
        v-if="pageType !== 'create'"
      >
        <span style="cursor: pointer; color: #1796eb;">
          合同变更申请<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <div v-for="item in changeContractMenu" :key="item.value">
            <el-dropdown-item :command="item.value">{{
              item.label
            }}</el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <h2 v-if="pageType == 'create'">添加学员合同</h2>
      <h2 v-if="pageType == 'edit'">编辑学员合同</h2>
      <h2 v-if="pageType == 'details'">学员合同详情</h2>
      <!-- 修改页面 -->
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="140px"
        v-if="operation === 'see'"
        style="margin-top: 40px;"
      >
        <!-- <div class="form_wrap"> -->
        <!-- <h4>基础信息</h4>
                    <hr /> -->
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <!-- <el-form-item label="是否新建学员" prop="sno" v-if="pageType != 'create'">
                            <el-input v-model="formData.sno" style="width: 218px;" disabled></el-input>
                        </el-form-item> -->
          <el-form-item
            label="合同编号"
            prop="contractNo"
            v-if="pageType != 'create'"
          >
            <el-input
              v-model="formData.contractNo"
              style="width: 218px;"
              placeholder="请填写合同编号"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="学员ID">
            <el-select
              :disabled="true"
              v-model="formData.user_id"
              placeholder="请选择学员ID"
              @change="changeStudent"
            >
              <el-option
                v-for="item in stutendList"
                :key="item.id"
                :label="`${item.sno}: ${item.name}`"
                :value="parseInt(item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学员编号" prop="sno">
            <el-input
              v-model="formData.sno"
              style="width: 218px;"
              placeholder="请填写学员编号"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="学员姓名" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写学员姓名"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="英文名称" prop="name">
                            <el-input v-model="formData.name" style="width: 218px;"></el-input>
                        </el-form-item> -->
          <!-- <el-form-item label="学员类型" prop="mobile">
                            <el-select v-model="formData.sex" placeholder="请选择">
                                <el-option
                                    v-for="item in sexData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
          <el-form-item label="合同类型" prop="type_id">
            <el-select
              :disabled="true"
              v-model="formData.type_id"
              placeholder="请选择合同类型"
              @change="changeContractType"
            >
              <el-option
                v-for="item in contractTypeList"
                :key="item.id"
                :label="item.type_name"
                :value="parseInt(item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="合同总金额" prop="price">
                            <el-input v-model="formData.price" style="width: 218px;"></el-input>
                        </el-form-item> -->
          <el-form-item label="学员手机号" prop="mobile">
            <el-input
              :disabled="true"
              v-model="formData.mobile"
              maxlength="11"
              placeholder="请填写学员手机号"
              style="width: 218px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="学员邮箱" prop="email">
            <el-input
              :disabled="true"
              v-model="formData.email"
              placeholder="请填写学员邮箱"
              style="width: 218px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同状态" prop="contract_status">
            <el-select
              v-model="formData.contract_status"
              placeholder="请选择合同状态"
              disabled
            >
              <el-option
                v-for="item in contractStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期" prop="start_date">
            <el-date-picker
              v-model="formData.start_date"
              type="date"
              placeholder="请选择开始日期"
              :picker-options="pickerOptionsStart"
              disabled
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" prop="end_date">
            <el-date-picker
              v-model="formData.end_date"
              type="date"
              placeholder="请选择结束日期"
              :picker-options="pickerOptionsEnd"
              disabled
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="初始级别" prop="initial_level">
            <el-select
              v-model="formData.initial_level"
              placeholder="请选择初始级别"
              @change="changeStartLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目标级别"
            prop="target_level"
            v-if="
              product === 'dyned'
                ? true
                : false || product === 'ineo'
                ? true
                : false
            "
          >
            <el-select
              v-model="formData.target_level"
              placeholder="请选择目标级别"
              @change="changeEndLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="当前级别"
            prop="current_level"
            v-if="product === 'dyned' ? true : false"
          >
            <el-select
              v-model="formData.current_level"
              placeholder="请选择当前级别"
              @change="changeMidLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="青少年课程管理"
            prop="class_id"
            v-if="formData.product === 'dyned_pro'"
          >
            <el-select
              v-model="formData.class_id"
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="课时" prop="mobile">
                            <el-input v-model="formData.mobile" style="width: 218px;"></el-input>
                        </el-form-item> -->
        </div>
        <!-- </div> -->
        <link-details
          :moduleData="moduleData"
          :formData="formData"
          @changeFormData="changeFormData"
        ></link-details>
      </el-form>
      <!-- 新增页面 -->
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="140px"
        v-if="operation === 'add'"
        style="margin-top: 40px;"
      >
        <!-- <div class="form_wrap">
                    <h4>基础信息</h4>
                    <hr /> -->
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <!-- <el-form-item label="是否新建学员" prop="sno" v-if="pageType != 'create'">
                            <el-input v-model="formData.sno" style="width: 218px;" disabled></el-input>
                        </el-form-item> -->
          <el-form-item
            label="合同编号"
            prop="contractNo"
            v-if="pageType != 'create'"
          >
            <el-input
              v-model="formData.contractNo"
              style="width: 218px;"
              placeholder="请填写合同编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="学员ID" prop="user_id">
            <el-select
              v-model="formData.user_id"
              placeholder="请选择学员ID"
              @change="changeStudent"
            >
              <el-option
                v-for="item in stutendList"
                :key="item.id"
                :label="`${item.sno}: ${item.name}`"
                :value="parseInt(item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学员编号" prop="sno">
            <el-input
              v-model="formData.sno"
              style="width: 218px;"
              placeholder="请填写学员编号"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="学员姓名" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写学员姓名"
              disabled
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="英文名称" prop="name">
                            <el-input v-model="formData.name" style="width: 218px;"></el-input>
                        </el-form-item> -->
          <!-- <el-form-item label="学员类型" prop="mobile">
                            <el-select v-model="formData.sex" placeholder="请选择">
                                <el-option
                                    v-for="item in sexData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
          <el-form-item label="合同类型" prop="type_id">
            <el-select
              disabled
              v-model="formData.type_id"
              placeholder="请选择合同类型"
              @change="changeContractType"
            >
              <el-option
                v-for="item in contractTypeList"
                :key="item.id"
                :label="item.type_name"
                :value="parseInt(item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="合同总金额" prop="price">
                            <el-input v-model="formData.price" style="width: 218px;"></el-input>
                        </el-form-item> -->
          <el-form-item label="学员手机号" prop="mobile">
            <el-input
              disabled
              v-model="formData.mobile"
              maxlength="11"
              placeholder="请填写学员手机号"
              style="width: 218px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="学员邮箱" prop="email">
            <el-input
              disabled
              v-model="formData.email"
              placeholder="请填写学员邮箱"
              style="width: 218px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同状态" prop="contract_status">
            <el-select
              v-model="formData.contract_status"
              placeholder="请选择合同状态"
            >
              <el-option
                v-for="item in contractStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期" prop="start_date">
            <el-date-picker
              v-model="formData.start_date"
              type="date"
              placeholder="请选择开始日期"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" prop="end_date">
            <el-date-picker
              v-model="formData.end_date"
              type="date"
              placeholder="请选择结束日期"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="初始级别" prop="initial_level">
            <el-select
              v-model="formData.initial_level"
              placeholder="请选择初始级别"
              @change="changeStartLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目标级别"
            prop="target_level"
            v-if="
              product === 'dyned'
                ? true
                : false || product === 'ineo'
                ? true
                : false
            "
          >
            <el-select
              v-model="formData.target_level"
              placeholder="请选择目标级别"
              @change="changeEndLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="当前级别"
            prop="current_level"
            v-if="product === 'dyned' ? true : false"
          >
            <el-select
              v-model="formData.current_level"
              placeholder="请选择当前级别"
              @change="changeMidLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="青少年课程管理"
            prop="class_id"
            v-if="product === 'dyned_pro' ? true : false"
          >
            <el-select v-model="formData.class_id" placeholder="请选择">
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="课时" prop="mobile">
                            <el-input v-model="formData.mobile" style="width: 218px;"></el-input>
                        </el-form-item> -->
        </div>
        <!-- </div> -->
        <link-details
          :moduleData="moduleData"
          :formData="formData"
          @changeFormData="changeFormData"
        ></link-details>
      </el-form>
      <el-form label-width="90px">
        <el-form-item>
          <el-button @click="handleCancle">取消</el-button>
          <el-button
            type="primary"
            @click="
              handleSubmitNew('contractList', { type_id: formData.type_id })
            "
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 合同变更modal -->
    <el-dialog
      :title="changeContractReason"
      width="510px"
      :visible.sync="showChangeContract"
    >
      <div class="changeContent">
        <el-form
          ref="editContractForm"
          :model="editContractFormData"
          :rules="editRules"
          label-position="right"
          label-width="140px"
        >
          <!-- 修改姓名 -->
          <div v-if="changeContractReason === '修改学员姓名'">
            <el-form-item label="学员原姓名">
              <p>{{ formData.name }}</p>
            </el-form-item>
            <el-form-item label="学员新姓名" prop="name">
              <el-input
                v-model="editContractFormData.name"
                placeholder="请填写新姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="editRemark">
              <el-input
                type="textarea"
                :rows="3"
                v-model="editContractFormData.nameRemark"
              ></el-input>
            </el-form-item>
          </div>
          <!-- 修改手机号 -->
          <div v-if="changeContractReason === '修改手机号码'">
            <el-form-item label="原手机号码">
              <p>{{ formData.mobile }}</p>
            </el-form-item>
            <el-form-item label="新手机号码" prop="mobile">
              <el-input
                v-model="editContractFormData.mobile"
                placeholder="请填写新手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="editRemark">
              <el-input
                type="textarea"
                :rows="3"
                v-model="editContractFormData.mobileRemark"
              ></el-input>
            </el-form-item>
          </div>
          <!-- 延期修改 -->
          <div v-if="changeContractReason === '延期'">
            <el-form-item label="原结束时间">
              <p>{{ formData.end_date }}</p>
            </el-form-item>
            <el-form-item label="延期至" prop="end_date">
              <el-date-picker
                v-model="editContractFormData.end_date"
                type="date"
                placeholder="请选择结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="editRemark">
              <el-input
                type="textarea"
                :rows="3"
                v-model="editContractFormData.endDateRemark"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="showChangeContract = false">返回</el-button>
        <el-button type="primary" @click="confirmChangeContractStatus"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeTitleMinin, detailsMinin } from "@/mixin";
import http from "@/api/contract";
import contractAuditHttp from "@/api/contract_audit";
import globalApi from "@/api/global";
import { formatArray, formatDate } from "@/utils";
import details from "@/components/details";
import { resolve, reject } from "q";

export default {
  name: "contractDetails",
  mixins: [changeTitleMinin, detailsMinin],
  components: {
    linkDetails: details
  },
  data() {
    return {
      editContractFormData: {},
      editRules: {
        name: [{ required: true, message: "请填写修改姓名" }],
        mobile: [{ required: true, message: "请填写修改手机号码" }],
        end_date: [{ required: true, message: "请选择延期日期" }]
      },
      changeValue: "",
      changeValueDetail: "",
      changeContractReason: "",
      showChangeContract: false,
      changeContractMenu: [
        {
          value: "修改手机号码",
          label: "修改手机号码"
        },
        {
          value: "修改学员姓名",
          label: "修改学员姓名"
        },
        {
          value: "延期",
          label: "延期"
        }
        // {
        //     value: '级别调整',
        //     label: '级别调整'
        // }
      ],
      show: true,
      startLevel: null,
      midLevel: null,
      endLevel: null,
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      showLevel: true,
      product: "",
      showLevelItem: true,
      operation: null,
      center_id: null,
      // formDate: null,
      rules: {
        user_id: [{ required: true, message: "请选择学员编号" }],
        // type_id: [
        //     { required: true, message: '请选择合同类型' },
        // ],
        start_date: [{ required: true, message: "请选择开始日期" }],
        end_date: [{ required: true, message: "请选择结束日期" }],
        contract_status: [{ required: true, message: "请选择合同状态" }],
        // email: [
        //     { required: true, message: '请填写邮箱' },
        //     { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '邮箱填写有误', trigger: 'blur' }
        // ],
        // mobile: [
        //     { required: true, message: '请填写手机号' },
        //     { pattern: /^1[3-9]\d{9}$/, message: '手机号填写有误', trigger: 'blur' }
        // ],
        current_level: [{ required: true, message: "请选择当前级别" }],
        class_id: [{ required: true, message: "请选择课程" }],
        initial_level: [{ required: true, message: "请选择初始级别" }],
        target_level: [{ required: true, message: "请选择目标级别" }]
      },
      classList: [],
      isSubmit: false,
      http: http,
      levelList: [],
      contractTypeList: [],
      stutendList: [],
      contractStatusList: [],
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.formData.end_date;
          if (endDateVal) {
            return (
              time.getTime() >
              new Date(endDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            ); // 设置开始时间必须小于结束时间     不能等于
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.formData.start_date;
          if (beginDateVal) {
            console;
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            ); // 设置结束时间必须大于开始时间
          }
        }
      },
      stutendList: [],
      neolevel: [
        {
          label: {
            code: "A1",
            name: "A1"
          },
          value: 0
        },
        {
          label: {
            code: "A2",
            name: "A2"
          },
          value: 1
        },
        {
          label: {
            code: "B1",
            name: "B1"
          },
          value: 2
        },
        {
          label: {
            code: "B2",
            name: "B2"
          },
          value: 3
        },
        {
          label: {
            code: "C1",
            name: "C1"
          },
          value: 4
        }
      ],
      userlevel: [
        {
          id: 1,
          name: "A1",
          code: "A1"
        },
        {
          id: 2,
          name: "A2",
          code: "A2"
        },
        {
          id: 3,
          name: "B1",
          code: "B1"
        },
        {
          id: 4,
          name: "B2",
          code: "B2"
        },
        {
          id: 5,
          name: "C1",
          code: "C1"
        }
      ]
    };
  },
  methods: {
    // 合同变更申请modal
    changeReason(val) {
      this.changeContractReason = val;
      this.showChangeContract = true;
    },
    // 确定更改
    confirmChangeContractStatus() {
      this.$refs["editContractForm"].validate(valid => {
        if (valid) {
          let params;
          if (this.changeContractReason === "修改学员姓名") {
            let str = {
              原姓名: this.formData.name,
              修改姓名: this.editContractFormData.name
            };
            let str1 = {
              name: this.editContractFormData.name
            };
            params = {
              center_id: this.center_id,
              contract_id: this.formData.id,
              varname: "name",
              varinfo: JSON.stringify(str),
              varjson: JSON.stringify(str1),
              remark: this.editContractFormData.nameRemark
                ? this.editContractFormData.nameRemark
                : ""
            };
          } else if (this.changeContractReason === "修改手机号码") {
            let str = {
              原手机号: this.formData.mobile,
              修改手机号: this.editContractFormData.mobile
            };
            let str1 = {
              mobile: this.editContractFormData.mobile
            };
            params = {
              center_id: this.center_id,
              contract_id: this.formData.id,
              varname: "mobile",
              varinfo: JSON.stringify(str),
              varjson: JSON.stringify(str1),
              remark: this.editContractFormData.mobileRemark
                ? this.editContractFormData.mobileRemark
                : ""
            };
          } else if (this.changeContractReason === "延期") {
            let str = {
              原结束时间: this.formData.end_date,
              延期至: formatDate.toStr(
                new Date(this.editContractFormData.end_date),
                "YYYY-MM-DD"
              )
            };
            let str1 = {
              end_date: formatDate.toStr(
                new Date(this.editContractFormData.end_date),
                "YYYY-MM-DD"
              )
            };
            params = {
              center_id: this.center_id,
              contract_id: this.formData.id,
              varname: "end_date",
              varinfo: JSON.stringify(str),
              varjson: JSON.stringify(str1),
              remark: this.editContractFormData.endDateRemark
                ? this.editContractFormData.endDateRemark
                : ""
            };
          }
          contractAuditHttp.createContent(params).then(res => {
            this.$message.success(res.msg || "修改申请提交成功！");
            this.showChangeContract = false;
          });
        } else {
          this.$message.warning("请填写修改信息！");
        }
      });
    },
    handleSubmitNew(name, params) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (
            this.formData.product === "dyned_pro" ||
            this.showLevel === false
          ) {
            let formData = JSON.parse(JSON.stringify(this.formData));
            if (formData.start_date) {
              formData.start_date = formatDate.toStr(
                new Date(formData.start_date),
                "YYYY-MM-DD"
              );
            }
            if (formData.end_date) {
              formData.end_date = formatDate.toStr(
                new Date(formData.end_date),
                "YYYY-MM-DD"
              );
            }
            if (formData.birthday) {
              formData.birthday = formatDate.toStr(
                new Date(formData.birthday),
                "YYYY-MM-DD"
              );
            }
            if (this.pageType == "create") {
              formData.center_id = JSON.parse(
                sessionStorage.getItem("user")
              ).center_id;
            }
            console.log("formData:", formData);
            if (this.pageType == "create") {
              this.http.createContent(formData).then(res => {
                console.log(res.code === 110);
                if (res.code === 110) {
                  this.showDialog = true;
                  let error = res.error;
                  for (let items of error) {
                    console.log(items);
                  }
                } else {
                  this.$message.success(res.msg || "新增成功！");
                  this.$router.push({ name, params });
                }
              });
            } else {
              this.http.editContent(formData).then(res => {
                console.log(res.code === 110);
                if (res.code === 110) {
                  this.showDialog = true;
                  let error = res.error;
                  for (let items of error) {
                    console.log(items);
                  }
                } else {
                  this.$message.success(res.msg || "编辑成功！");
                  this.$router.push({ name, params });
                }
              });
            }
          } else {
            if (this.isSubmit) {
              let formData = JSON.parse(JSON.stringify(this.formData));
              if (formData.start_date) {
                formData.start_date = formatDate.toStr(
                  new Date(formData.start_date),
                  "YYYY-MM-DD"
                );
              }
              if (formData.end_date) {
                formData.end_date = formatDate.toStr(
                  new Date(formData.end_date),
                  "YYYY-MM-DD"
                );
              }
              if (formData.birthday) {
                formData.birthday = formatDate.toStr(
                  new Date(formData.birthday),
                  "YYYY-MM-DD"
                );
              }
              if (this.pageType == "create") {
                formData.center_id = JSON.parse(
                  sessionStorage.getItem("user")
                ).center_id;
              }
              // console.log('formData:',formData)
              if (this.pageType == "create") {
                this.http.createContent(formData).then(res => {
                  console.log(res.code === 110);
                  if (res.code === 110) {
                    this.showDialog = true;
                    let error = res.error;
                    for (let items of error) {
                      console.log(items);
                    }
                  } else {
                    this.$message.success(res.msg || "新增成功！");
                    this.$router.push({ name, params });
                  }
                });
              } else {
                this.http.editContent(formData).then(res => {
                  if (res.code === 110) {
                    this.showDialog = true;
                    let error = res.error;
                    for (let items of error) {
                      console.log(items);
                    }
                  } else {
                    this.$message.success(res.msg || "编辑成功！");
                    this.$router.push({ name, params });
                  }
                });
              }
            } else {
              this.$message.warning("请选择正确级别");
            }
          }
        } else {
          this.$message.warning("请填写完整信息");
        }
      });
    },
    changeStartLevel(val) {
      for (let level of this.levelList) {
        console.log(val, level);
        if (val === level.label.name) {
          this.startLevel = Number(level.label.id);
          if (
            (this.midLevel && this.midLevel < this.startLevel) ||
            (this.endLevel && this.startLevel > this.endLevel)
          ) {
            console.log(this.midLevel < this.startLevel);
            this.$message.warning("请选择正确的当前级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeMidLevel(val) {
      for (let level of this.levelList) {
        if (val === level.label.name) {
          this.midLevel = Number(level.label.id);
          console.log(level.label.id);
          if (
            (this.endLevel && this.midLevel > this.endLevel) ||
            this.startLevel > this.midLevel
          ) {
            this.$message.warning("请选择正确的当前级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeEndLevel(val) {
      for (let level of this.levelList) {
        if (val === level.label.name) {
          this.endLevel = Number(level.label.id);
          if (
            this.endLevel < this.midLevel ||
            this.endLevel < this.startLevel
          ) {
            this.$message.warning("请选择正确的目标级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeContractType(id) {
      console.log(id);
      for (let item of this.contractTypeList) {
        console.log(item.id, id);
        if (item.id === id) {
          if (item.product === "dyned_pro") {
            this.showLevel = false;
          }
        } else {
          this.showLevel = true;
        }
      }
    },
    verifyCommonUnique(type) {
      let data = {};
      data[type] = this.formData[type];
      globalApi.verifyCommonUnique(data, "student").then(res => {
        // 调用主动验证
        // valid: false 为验证失败，已存在
      });
    },
    changeStudent(id) {
      if (this.stutendList.length) {
        for (let i = 0; i < this.stutendList.length; i++) {
          if (id == this.stutendList[i].id) {
            this.formData.name = this.stutendList[i].name;
            this.formData.sno = this.stutendList[i].sno;
            this.formData.email = this.stutendList[i].email;
            this.formData.mobile = this.stutendList[i].mobile;
          }
        }
      }
      if (this.product === "neo") {
        let student = this.stutendList.filter(item => {
          if (item.id === id) {
            return true;
          }
        });
        let params = student[0].email;
        http
          .getptResult({ email: params })
          .then(res => {
            this.$set(this.formData, "initial_level", res.level);
          })
          .catch(() => {
            this.$set(this.formData, "initial_level", "");
          });
      }
      if (this.product === "ineo") {
        let student = this.stutendList.filter(item => {
          if (item.id === id) {
            return true;
          }
        });
        let params = student[0].email;
        console.log("params", params);
        http
          .getptResult({ email: params })
          .then(res => {
            this.$set(this.formData, "initial_level", res.level);
          })
          .catch(() => {
            this.$message.error("请先进行PT测试");
            this.$set(this.formData, "initial_level", "");
          });
      }
    },
    // 合同类型
    getContractType() {
      http.getContractType().then(res => {
        this.contractTypeList = res.data;
      });
    },
    getStudent() {
      if (this.$route.query.operation === "add") {
        // 潜客
        http.getCustomer().then(res => {
          this.stutendList = res.data;
          console.log("getCustomer", res.data);
        });
      } else {
        // 学员
        http.getStudent().then(res => {
          this.stutendList = res.data;
          console.log("stutendList", res.data);
        });
      }
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      let contractStatusList = [];
      let keysData = Object.keys(basicConfig.contract_status);
      if (keysData.length) {
        keysData.map(item => {
          contractStatusList.push({
            value: item,
            label: basicConfig.contract_status[item].a
          });
        });
        // 合同状态列表初始化
        this.contractStatusList = contractStatusList;
      }
      let userData = JSON.parse(sessionStorage.getItem("user"));
      this.center_id = userData.center_id;
      this.getPageParams("contractDetailsParams", () => {
        this.getCommonModuleFields("contract");
        if (this.pageParams.type_id) {
          this.formData["type_id"] = this.pageParams.type_id; // 合同管理 新建
        }
      });
    },
    getparams() {
      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "contractDetailsParams1",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("contractDetailsParams1");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);
        this.showLevel = pageParams.showLevel;
        this.product = pageParams.product;
      }

      // 判断是否是neo 与 ineo 初始化级别不同
      let config = JSON.parse(sessionStorage.getItem("basicConfig"));
      if (this.product === "neo" || this.product === "ineo") {
        config.user_level = this.userlevel;
        sessionStorage.setItem("basicConfig", JSON.stringify(config));
        this.levelList = formatArray(config.user_level);
        // this.levelList = this.neolevel;
      } else {
        this.levelList = formatArray(config.user_level);
      }
      // console.log("levelList", this.levelList);
    }
  },
  created() {
    this.init();
    this.getContractType();
    this.getStudent();
    this.getparams();
    http.getClassList().then(res => {
      this.classList = res.data;
    });
    if (this.$route.params.product === "ineo") {
      this.showLevelItem = this.$route.query.showLevel;
    } else {
      this.showLevelItem = !this.$route.query.showLevel;
    }
  },
  mounted() {
    if (this.$route.query.operation) {
      this.operation = this.$route.query.operation;
    } else {
      this.operation = "see";
    }
  },
  destroyed() {
    globalApi.getBasicConfig().then(data => {
      sessionStorage.setItem("basicConfig", JSON.stringify(data.data));
    });
  }
};
</script>

<style lang="scss" scoped>
.contractDetails {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  .basic_title {
    width: 100%;
    line-height: 41px;
    background: #f5f5f5;
    padding-left: 24px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
  }
  .basic_content {
    padding: 40px 0 44px 24px;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    /deep/ .el-form-item {
      // width: 25%;
      font-weight: 600;
    }
    li {
      width: 25%;
      list-style: none;
      line-height: 45px;
      font-weight: 600;
      span {
        font-weight: 400;
      }
    }
  }
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }

  .form_wrap {
    margin-bottom: 10px;
    h4 {
      margin: 10px 0px;
    }
    hr {
      margin-bottom: 10px;
    }
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
  // /deep/ .el-dropdown-menu {
  //     width: 100px;
  //     text-align: center;
  // }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .changeContent {
    div {
      p {
        width: 90px;
      }
      /deep/ .el-input {
        width: 330px;
      }
      /deep/ .el-textarea {
        width: 330px;
      }
    }
  }
}
</style>
